<template>
    <div class="page">
        <x-header :left-options="{showBack: true,backText:'直播课程详情'}" class="headerBox"></x-header>
        <!-- 直播 -->
        <div class="navLive" id="J_prismPlayer">
            <!--                        <img src="../assets/images/Courseinfo01.png"/>-->
        </div>
        <!-- 我的进度 -->
        <div class="navTitleBox">
            <div class="navTitle_top">
                <div>我的进度</div>
                <div>{{numerator}}/{{courseInfo.lessonNum}}</div>
            </div>
            <box gap="10px 0">
                <x-progress :percent="(numerator/courseInfo.lessonNum)*100" :show-cancel="false"></x-progress>
            </box>
            <div class="navTitle_bottom">
                <div class="navTitle_bottomLeft">
                    <span>学员</span>
                    <div v-for="(student, index) in students" :key="index">
                        <p v-if="student.largeAvatar!=''">
                            <img :src="student.largeAvatar"/>
                        </p>
                        <p v-if="student.largeAvatar==''">
                            <img src="../assets/images/avatar.png"/>
                        </p>
                    </div>
                </div>
                <router-link to="/studentDetails" class="navTitle_bottomright" style="display: none">
                    <span>全部学员</span>
                    <img src="../assets/images/icon-more01.png"/>
                </router-link>
            </div>
        </div>
        <!-- 公告 -->
        <router-link to="/" class="notice" style="display:none">
            <img src="../assets/images/playback02.png" alt/>
            <!--            <marquee>-->
            <!--                <marquee-item v-for="i in 5" :key="i" @click.native="onClick">麦月小苍尔作文暂停停止！</marquee-item>-->
            <!--            </marquee>-->
            <img src="../assets/images/playback03.png" alt/>
        </router-link>
        <!-- 下载弹框 -->
        <confirm v-model="showDownload" title="确认下载改文件吗" @on-confirm="downloadConfirm">
            <img :src="downloadImg" alt class="downLoadIcon"/>
            <div>{{downloadTitle}}</div>
        </confirm>
        <!-- tab导航 -->
        <div class="navTabList">
            <tab
                    :line-width="3"
                    custom-bar-width="20px"
                    active-color="#000"
                    bar-active-color="#1F7AFF"
                    v-model="tabIndex"
            >
                <tab-item
                        class="vux-center"
                        v-for="(item, index) in listContent"
                        :key="index"
                >{{item.title}}
                </tab-item>
            </tab>
        </div>
        <!-- 内容 -->
        <swiper
                v-model="tabIndex"
                :show-dots="false"
                ref="cateSwiper"
                :min-moving-distance="2000"
                @on-get-height="getPageHeight"
                class="swiperBox"
        >
            <swiper-item v-for="(item, index) in listContent" :key="index">
                <!-- 目录 -->
                <div v-if="item.title == '目录'" class="catalogBox">
                    <group v-for="(chapter,index2) in NoChapterLessons" :key="index2">
                        <cell :title="chapter.title" is-link :border-intent="true"
                              @click.native="videoClike(chapter.liveRoom,chapter.id,chapter.startTimeStr)"
                        >
                            <div :class="chapter.learnState=='finished'?'study':''">
                                {{chapter.learnState=='finished'?'已学习':'未学习'}}
                            </div>
                        </cell>
                    </group>
                </div>
                <!-- 话题 -->
                <div v-if="item.title == '话题'" class="commentBox">
                    <img v-if="courseTopic.length<=0" src="../assets/images/nullmaterial02.png" alt class="emptyBox"/>
                    <div class="evaBox">
                        <div class="evaList" v-for="(eva, indexe) in courseTopic" :key="indexe">
                            <div class="evaList_left">
                                <img v-if="eva.largeAvatar!=''" :src="eva.largeAvatar"/>
                                <img v-else src="../assets/images/avatar.png"/>
                            </div>
                            <div class="evaList_right">
                                <div class="evaList_right_top">
                                    <div>{{eva.nickName}}</div>
                                    <div class="stars">
                                        <div class="evaList_right_middle" v-html="eva.title"></div>
                                    </div>
                                </div>

                                <div class="evaList_right_middle" v-html="eva.content"></div>
                                <div class="evaList_right_bottom">
                                    <div class="evaList_right_bottom_left">{{eva.createTimeStr}}</div>
                                    <div class="evaList_right_bottom_right" style="display: none">
                                        <img src="../assets/images/share10.png"/>
                                        <img src="../assets/images/Reply12x.png"/>
                                        <img src="../assets/images/live11.png"/>
                                        <div>{{eva.zanNum}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div v-if="item.title == '资料区'" class="dataBox">
                    <img
                            v-if="item.dataContent.length<=0"
                            src="../assets/images/nullmaterial07.png"
                            alt
                            class="emptyBox"
                    />
                    <!-- 资料区tab -->
                    <ul class="vux-tab">
                        <li
                                class="vux-tab-item"
                                v-for="(val,num) in item.dataContent"
                                :key="num"
                                @click="onDataTab(num)"
                        >
                            <span :class="tabIndex2 == num?'active': ''">{{val.title}}</span>
                        </li>
                    </ul>
                    <div v-for="(data, indexd) in item.dataContent" :key="indexd">
                        <!-- 我的资料 -->
                        <div v-if="tabIndex2==indexd">
                            <!-- 筛选 -->
                            <div class="resTitleBox">
                                <div class="resTitle_left">全部文档</div>
                                <div class="resTitle_right">
                                    <img src="../assets/images/search30.png" style="display: none"/>
                                    <img src="../assets/images/filtrate6.png" @click="sortPop = !sortPop"
                                         style="display: none"/>
                                    <img src="../assets/images/filtrate7.png" @click="upLoadPop = !upLoadPop"
                                         style="display: none"/>
                                </div>

                                <!-- 筛选弹框 -->
                                <div class="sorts" v-if="sortPop == true" style="display: none">
                                    <div class="sortList">
                                        <img src="../assets/images/icon_weijian2x.png"/>文件
                                    </div>
                                    <div class="sortList">
                                        <img src="../assets/images/icon_img2x.png"/>照片
                                    </div>
                                    <div class="sortList">
                                        <img src="../assets/images/icon_viedio2x.png"/>视频
                                    </div>
                                </div>

                                <!-- 上传弹框 -->
                                <div class="sorts" style="right: 17px;display: none" v-if="upLoadPop == true">
                                    <div class="sortList">
                                        <img src="../assets/images/icon_scwj2x.png"/>上传文件
                                    </div>
                                    <div class="sortList">
                                        <img src="../assets/images/icon_sctp2x.png"/>上传照片
                                    </div>
                                    <div class="sortList">
                                        <img src="../assets/images/icon_scsp2x.png"/>上传视频
                                    </div>
                                </div>
                            </div>
                            <swipeout>
                                <swipeout-item
                                        transition-mode="follow"
                                        v-for="(dataL, indexL) in materialsList"
                                        :key="indexL"
                                >
                                    <div slot="right-menu">
                                        <swipeout-button class="delBtn">删除</swipeout-button>
                                    </div>
                                    <div slot="content" class="demo-content">
                                        <div class="resList">
                                            <img class="resList_left" src="../assets/images/material03.png"/>
                                            <div class="resList_middle">
                                                <div>{{dataL.title}}</div>
                                                <div>
                                                    <span>{{dataL.createTimeTimeStr}}</span>
                                                </div>
                                            </div>
                                            <div class="resList_right">
                                                <img src="../assets/images/material11.png"/>
                                                <img
                                                        v-if="tabIndex2!==0"
                                                        src="../assets/images/material07.png"
                                                        @click="clickDownload(dataL)"
                                                />
                                                <template v-if="tabIndex2!==0">
                                                    <img
                                                            v-if="dataL.collect == false"
                                                            src="../assets/images/material05.png"
                                                            @click="onCollect(indexd,indexL)"
                                                    />
                                                    <img
                                                            v-if="dataL.collect == true"
                                                            src="../assets/images/material08.png"
                                                            @click="onCollect(indexd,indexL)"
                                                    />
                                                </template>
                                            </div>
                                        </div>
                                    </div>
                                </swipeout-item>
                            </swipeout>
                        </div>
                    </div>
                </div>
                <!-- 评价 -->
                <div v-if="item.title == '评价'" class="commentBox">
                    <img
                            v-if="comment.length<=0"
                            src="../assets/images/nullmaterial03.png"
                            alt
                            class="emptyBox"
                    />
                    <div class="evaBox">
                        <div class="evaList" v-for="(eva, indexe) in comment" :key="indexe">
                            <div class="evaList_left">
                                <img v-if="eva.userHeader!=''" :src="eva.userHeader"/>
                                <img v-else src="../assets/images/avatar.png"/>
                            </div>
                            <div class="evaList_right">
                                <div class="evaList_right_top">
                                    <div>{{eva.userName}}</div>
                                    <div class="stars" v-if="eva.rating=='1'">
                                        <img src="../assets/images/Star_yellow@2x.png">
                                        <img src="../assets/images/Star_gray@2x.png">
                                        <img src="../assets/images/Star_gray@2x.png">
                                        <img src="../assets/images/Star_gray@2x.png">
                                        <img src="../assets/images/Star_gray@2x.png">
                                    </div>
                                    <div class="stars" v-if="eva.rating=='2'">
                                        <img src="../assets/images/Star_yellow@2x.png">
                                        <img src="../assets/images/Star_yellow@2x.png">
                                        <img src="../assets/images/Star_gray@2x.png">
                                        <img src="../assets/images/Star_gray@2x.png">
                                        <img src="../assets/images/Star_gray@2x.png">
                                    </div>
                                    <div class="stars" v-if="eva.rating=='3'">
                                        <img src="../assets/images/Star_yellow@2x.png">
                                        <img src="../assets/images/Star_yellow@2x.png">
                                        <img src="../assets/images/Star_yellow@2x.png">
                                        <img src="../assets/images/Star_gray@2x.png">
                                        <img src="../assets/images/Star_gray@2x.png">
                                    </div>
                                    <div class="stars" v-if="eva.rating=='4'">
                                        <img src="../assets/images/Star_yellow@2x.png">
                                        <img src="../assets/images/Star_yellow@2x.png">
                                        <img src="../assets/images/Star_yellow@2x.png">
                                        <img src="../assets/images/Star_yellow@2x.png">
                                        <img src="../assets/images/Star_gray@2x.png">
                                    </div>
                                    <div class="stars" v-if="eva.rating=='5'">
                                        <img src="../assets/images/Star_yellow@2x.png">
                                        <img src="../assets/images/Star_yellow@2x.png">
                                        <img src="../assets/images/Star_yellow@2x.png">
                                        <img src="../assets/images/Star_yellow@2x.png">
                                        <img src="../assets/images/Star_yellow@2x.png">
                                    </div>
                                </div>
                                <div class="evaList_right_middle">{{eva.content}}</div>
                                <div class="evaList_right_link" style="display: none">
                                    <div class="evaList_right_link_name">{{eva.otherName}}</div>
                                    <div>等人</div>
                                    <div class="evaList_right_link_num">共{{eva.num}}条回复></div>
                                </div>
                                <div class="evaList_right_bottom">
                                    <div class="evaList_right_bottom_left">{{eva.createTimeStr}}</div>
                                    <div class="evaList_right_bottom_right" style="display: none">
                                        <img src="../assets/images/share10.png"/>
                                        <img src="../assets/images/Reply12x.png"/>
                                        <img src="../assets/images/live11.png"/>
                                        <div>{{eva.zanNum}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="commentBtn" @click="commentShow=!commentShow">立即评价</div>

                    </div>
                </div>
            </swiper-item>
        </swiper>
        <!-- 评价弹框 -->
        <confirm
                v-model="commentShow"
                title="请留下您的评价"
                class="commentDialog"
                @on-cancel="commentCancel"
                @on-confirm="commentConfirm"
        >
            <div class="innerBox">
                <div class="starBox flex">
                    <span class="label">课程评价:</span>
                    <rater :font-size="25" v-model="commentStar"></rater>
                </div>
                <group>
                    <x-textarea v-model="commentText" :max="50" placeholder="请输入您想评论的内容"></x-textarea>
                </group>
            </div>
        </confirm>
    </div>
</template>

<script>
    import {
        XHeader,
        XProgress,
        Box,
        Group,
        Cell,
        Marquee,
        MarqueeItem,
        Tab,
        TabItem,
        Swiper,
        SwiperItem,
        Swipeout,
        SwipeoutItem,
        SwipeoutButton,
        Confirm,
        Rater,
        XTextarea,
    } from 'vux'
    import {courseDetail, getVideoInfo, creatComment, getJsapiSign} from '@/api/index/index'
    import {courseMaterials, courseMembers, addLessonLearn} from '@/api/index/study'
    import {getPlayAuth, getPushUrl} from '@/api/index/video'
    import VueAliplayer from 'vue-aliplayer'
    import store from "../store/store";
    import wx from 'weixin-js-sdk';

    export default {
        components: {
            XHeader,
            XProgress,
            Box,
            Group,
            Cell,
            Marquee,
            MarqueeItem,
            Tab,
            TabItem,
            Swiper,
            SwiperItem,
            Swipeout,
            SwipeoutItem,
            SwipeoutButton,
            Confirm,
            Rater,
            XTextarea,
            'ali-player': VueAliplayer
        },


        data() {
            return {
                screenWidth: '',
                vid: '',
                lessonId: '',
                videoUrl: '',
                videoAuth: '',
                courseInfo: '',
                courseId: '',
                cover: '',
                player: '',
                teachers: [],
                NoChapterLessons: [],
                comment: [],
                materialsList: [],
                denominator: '20',
                numerator: 0,
                percent: 75,
                students: [],
                tabIndex: 0,
                tabIndex2: 0,
                // 小弹框
                sortPop: false,
                upLoadPop: false,
                // 下载文件
                showDownload: false,
                downloadImg: '',
                downloadTitle: '',
                commentShow: false,
                commentStar: 0,
                commentText: '',
                courseTopic: [],
                liveRoom: '',
                startTime: '',
                // tab
                listContent: [
                    {
                        title: '目录',
                        continue: true,
                        dataContent: []
                    },
                    {
                        title: '话题',
                        dataContent: []
                    },
                    {
                        title: '资料区',
                        dataContent: []
                    },
                    {
                        title: '评价',
                        dataContent: []
                    }
                ]
            }
        },
        created() {
            this.screenWidth = document.body.clientWidth;
            console.log(this.screenWidth);
            let id = this.$route.query.id;
            if (id != '') {
                this.courseId = id;
            }
            courseDetail(id, this.$store.state.user.id).then(res => {
                var that = this;
                console.log(res.data.data)
                this.courseInfo = res.data.data.courseInfo;
                this.courseId = res.data.data.courseInfo.id;
                this.cover = res.data.data.courseInfo.largePicture;
                this.teachers = res.data.data.teachers;
                this.NoChapterLessons = res.data.data.catalogue.NoChapterLessons;
                this.comment = res.data.data.comment;
                this.courseTopic = res.data.data.courseTopic;
                this.numerator = res.data.data.finishedNum;
                this.$store.commit('setUser', {courseId: 0});
                var player = new Aliplayer(
                    {
                        id: 'J_prismPlayer', // 容器id
                        cover: res.data.data.courseInfo.largePicture,
                        source: '',
                        vid: '', //媒体转码服务的媒体Id
                        playAuth: '',
                        width: that.screenWidth + 'px'
                        // height: "480px"
                    },
                    function (player) {
                        console.log('播放器创建了');
                    }
                );
            }).catch(err => {
                console.log(err)
            });
            courseMaterials(id).then(res => {
                console.log(res.data.data);
                this.materialsList = res.data.data.list;
            }).catch(err => {
                console.log(err)
            });
            courseMembers(id).then(res => {
                console.log(res.data.data);
                this.students = res.data.data.list
            }).catch(err => {
                console.log(err)
            });
            this.share(id);
        },
        methods: {
            getPageHeight() {
                let topHeight = document.getElementsByClassName('vux-slider')[0]
                        .offsetTop,
                    diffHeight = window.screen.height - 40
                this.$nextTick(() => {
                    this.$refs.cateSwiper.xheight = diffHeight + 'px'
                })
            },
            // 二级tab
            onDataTab(num) {
                this.tabIndex2 = num
            },
            onCollect(index1, index2) {
                let newCollect = this.listContent[3].dataContent[index1].dataList[index2]
                    .collect
                this.listContent[3].dataContent[index1].dataList[
                    index2
                    ].collect = !newCollect
            },
            clickDownload(item) {
                this.showDownload = !this.showDownload
                this.downloadImg = item.listSrc
                this.downloadTitle = item.listTitle
            },
            downloadConfirm() {
                this.$vux.alert.show({
                    title: '开始下载'
                })
            },
            videoClike(liveRoom, lessonId, startTime) {
                this.liveRoom = liveRoom;
                this.lessonId = lessonId;
                this.startTime = startTime;
                if (this.$store.state.user.id == '') {
                    var conf = confirm("注册登录后才可观看");
                    if (conf == true) {
                        this.$router.push("/");
                    }
                } else {
                    var startTime = new Date((this.startTime)).getTime();
                    var date = new Date((this.getDate())).getTime();
                    console.log(this.startTime);
                    console.log(startTime);
                    console.log(date);
                    console.log(this.getDate());
                    if (date < startTime) {
                        alert("直播未开始");

                    } else if (date > startTime) {
                        this.getVideoInfo()
                    }

                }
            },
            getVideoInfo() {
                console.log(this.player);
                if (this.player != '') {
                    this.player.dispose();
                }
                ;
                var that = this;
                getPlayAuth(this.lessonId, this.liveRoom).then(res => {
                    console.log(res.data.data);
                    var player = new Aliplayer({
                            id: 'J_prismPlayer', // 容器id
                            source: res.data.data.pullUrl,
                            width: that.screenWidth + 'px',
                            autoplay: true,//是否自动播放
                            isLive: true,//设置为true时为直播状态,直播时禁止用户拖动进度条
                            snapshot: true//flash启用截图功能
                        },
                        function (player) {
                            console.log(player);
                            console.log('播放器创建了');
                            that.player = player;
                        }
                    )
                }).catch(err => {
                    console.log(err)
                });
                addLessonLearn(this.$store.state.user.id, this.lessonId, this.courseId, this.$store.state.user.tenantId).then(res => {
                    console.log(res.data.data);
                    this.numerator = res.data.data.finishedNum;
                    courseDetail(this.courseId, this.$store.state.user.id).then(ros => {
                        this.courseInfo = ros.data.data.courseInfo;
                        this.courseId = ros.data.data.courseInfo.id;
                        this.cover = ros.data.data.courseInfo.largePicture;
                        this.teachers = ros.data.data.teachers;
                        this.NoChapterLessons = ros.data.data.catalogue.NoChapterLessons;
                        this.comment = ros.data.data.comment;
                        this.courseTopic = ros.data.data.courseTopic;
                        this.numerator = ros.data.data.finishedNum;
                    }).catch(err => {
                        console.log(err)
                    });
                }).catch(err => {
                    console.log(err)
                });
            },
            play: function () {
                const player = this.$refs.player.instance
                player && player.play();
            },
            pause: function () {
                const player = this.$refs.player.instance
                player && player.pause()
            },
            replay: function () {
                const player = this.$refs.player.instance
                player && player.replay()
            },
            reload: function () {
                // 修改source地址后
                const player = this.$refs.player.instance
                player && player.reloadPlayer()
            },

            // 评价弹框取消
            commentCancel() {
                this.commentStar = 0;
                this.commentText = '';
            },
            // 评价弹框确定
            commentConfirm() {
                console.log(this.$store.state.user.id);
                console.log(this.commentText);
                console.log(this.commentStar);
                console.log(this.$store.state.user.tenantId);
                // 请求接口
                creatComment(this.$store.state.user.id, this.commentText, this.commentStar, this.$store.state.user.tenantId, this.courseId).then(res => {
                    this.comment = res.data.data.comment;
                    this.commentStar = 0;
                    this.commentText = '';
                    console.log(res.data.data);
                }).catch(err => {
                    console.log(err)
                });
            },
            share(id) {
                if (this.$store.state.user.id == '') {
                    var conf = confirm("登录后才可购买");
                    if (conf == true) {
                        this.$router.push({name: 'login', query: {courseId: this.courseId}});
                    }
                } else {
                    courseDetail(id, this.$store.state.user.id).then(ras => {
                        console.log(ras.data.data);
                        let linkUrl = window.location.href;
                        this.courseInfo = ras.data.data.courseInfo;
                        var title = ras.data.data.courseInfo.title;
                        var largePicture = ras.data.data.courseInfo.largePicture;
                        getJsapiSign(this.$store.state.user.tenantId, this.$store.state.user.accessToken, this.$store.state.user.ticket, linkUrl).then(res => {
                            console.log(res.data.data);
                            this.$store.commit('setUser', {accessToken: res.data.data.access_token})
                            this.$store.commit('setUser', {ticket: res.data.data.tickets})
                            wx.config({
                                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                                appId: res.data.data.appId, // 必填，公众号的唯一标识
                                timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
                                nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
                                signature: res.data.data.signature, // 必填，签名
                                jsApiList: ['onMenuShareAppMessage', 'checkJsApi'] // 必填，需要使用的JS接口列表
                            });
                            wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
                                wx.checkJsApi({
                                    jsApiList: ['onMenuShareAppMessage'],
                                    success: function (res) {
                                        console.log("37479", res)
                                    }
                                });
                                wx.onMenuShareAppMessage({
                                    title: "润禾云",  // 分享标题
                                    desc: title, // 分享描述
                                    link: linkUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                                    imgUrl: largePicture, // 分享图标
                                    type: 'link', // 分享类型,music、video或link，不填默认为link
                                    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                                    success: function () {
                                        // 用户点击了分享后执行的回调函数
                                        // alert("onMenuShareAppMessage设置成功");
                                    }
                                });

                            });
                        }).catch(err => {
                            console.log(err)
                        });
                    }).catch(err => {
                        console.log(err)
                    });
                }

            },
            getDate() {
                var date = new Date();
                var seperator1 = "-";
                var seperator2 = ":";
                var month = date.getMonth() + 1;
                var day = date.getDate();
                var hours = date.getHours();
                var minutes = date.getMinutes();
                var seconds = date.getSeconds();
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (day >= 0 && day <= 9) {
                    day = "0" + day;
                }
                if (hours >= 0 && hours <= 9) {
                    hours = "0" + hours;
                }
                if (minutes >= 0 && minutes <= 9) {
                    minutes = "0" + minutes;
                }
                if (seconds >= 0 && seconds <= 9) {
                    seconds = "0" + seconds;
                }
                var currentdate = date.getFullYear() + seperator1 + month + seperator1 + day + " " + hours + seperator2 + minutes + seperator2 + seconds;
                return currentdate;
            }


        }
    }
</script>

<style lang="less" scoped>
    .page {
        // 头部导航
        /deep/ .headerBox {
            background-color: #fff;
            border-bottom: 1px solid #eee;

            .vux-header-left {
                left: 24px;

                .vux-header-back {
                    color: #000;
                }

                .left-arrow:before {
                    border-color: #000;
                }
            }
        }

        // 直播
        .navLive {
            width: 100%;
            height: 428px;
            position: relative;
            overflow: hidden;

            /deep/ .prism-info-display {
                box-sizing: border-box;
            }

            img {
                width: 100%;
                height: 100%;
            }
        }

        // 我的进度
        .navTitleBox {
            margin-top: 20px;
            width: 100%;
            background: #fff;
            padding: 0 26px;
            overflow: hidden;
            box-sizing: border-box;

            .navTitle_top {
                display: flex;
                justify-content: space-between;
                box-sizing: border-box;
                color: #000;
                font-size: 30px;
            }

            /deep/ .weui-progress__bar {
                height: 20px;
                border-radius: 20px;

                /deep/ .weui-progress__inner-bar {
                    background-color: #4289ff;
                    border-radius: 20px;
                }
            }

            .navTitle_bottom {
                display: flex;
                justify-content: center;
                align-items: center;
                color: #000;
                font-size: 30px;
                margin-top: 20px;

                .navTitle_bottomLeft {
                    display: flex;
                    align-items: center;
                    margin-right: auto;

                    span {
                        margin-right: 20px;
                    }

                    img {
                        width: 85px;
                        height: 85px;
                        border-radius: 50%;
                        margin: 0 5px;
                    }
                }

                .navTitle_bottomright {
                    display: flex;
                    align-items: center;
                    color: currentColor;

                    img {
                        width: 20px;
                        height: 30px;
                        margin-left: 10px;
                        margin-top: 2px;
                    }
                }
            }
        }

        // 公告
        .notice {
            display: flex;
            align-items: center;
            margin: 20px;
            padding: 20px;
            background-color: #eee;
            color: currentColor;

            & > img:first-child {
                width: 40px;
                height: 30px;
                margin-right: 20px;
            }

            & > img:last-child {
                width: 15px;
                height: 20px;
            }
        }

        // tab导航
        .navTabList {
            /deep/ .vux-tab-selected {
                font-size: 32px;
                font-weight: 600;
            }
        }

        .vux-slider {
            // tab内容板块
            /deep/ .vux-swiper {
                overflow-y: auto;
                // 目录样式
                .catalogBox {
                    margin-bottom: 120px;

                    .study {
                        color: #6495ED;
                    }

                    /deep/ .weui-cells {
                        margin-top: 0;

                        /deep/ .weui-cell {
                            font-size: 32px;
                        }

                        .slide {
                            padding: 0 40px;
                            overflow: hidden;
                            max-height: 0;
                            transition: max-height 0.5s cubic-bezier(0, 1, 0, 1) -0.1s;
                            background-color: #f8f9fa;

                            .jie {
                                color: currentColor;
                                color: #616161;
                                font-size: 30px;
                                padding: 20px 0;
                                display: flex;
                                border-top: 1px solid #f0efee;

                                .jieIcon {
                                    width: 42px;
                                    height: 42px;
                                    margin-right: 20px;
                                    vertical-align: middle;
                                }

                                .jieInfo {
                                    flex: 1 1 auto;
                                    display: flex;
                                    justify-content: space-between;
                                    align-items: center;

                                    .jyDate {
                                        color: #a1a1a1;
                                        margin-top: 10px;
                                        font-size: 24px;
                                    }

                                    .jieState {
                                        width: 42px;
                                        height: 42px;
                                    }

                                    .zyTitle {
                                        font-weight: 600;
                                        color: #000;
                                    }

                                    .zyNum {
                                        font-size: 24px;

                                        span {
                                            color: #fff;
                                            background-color: #4bc863;
                                            border-radius: 50%;
                                            text-align: center;
                                            display: inline-block;
                                            width: 40px;
                                            height: 40px;
                                            line-height: 40px;
                                            margin: 0 10px;
                                        }
                                    }
                                }

                                .zyIcon {
                                    width: 64px;
                                    height: 78px;
                                    margin: 0 20px;
                                }
                            }
                        }

                        .animate {
                            max-height: 9999px;
                            transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
                            transition-delay: 0s;
                        }
                    }

                    /deep/ .weui-cells:before {
                        border-top: 0;
                    }
                }

                // 资料样式
                .dataBox {
                    .vux-tab-item {
                        .active {
                            background-color: #3499ff;
                            border-radius: 25px;
                            color: #fff;
                            padding: 6px 20px;
                        }
                    }

                    // 筛选
                    .resTitleBox {
                        background-color: #f8f9fa;
                        width: 100%;
                        height: 100px;
                        padding: 0 26px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        box-sizing: border-box;
                        position: relative;

                        .resTitle_left {
                            font-size: 30px;
                        }

                        .resTitle_right {
                            margin-left: auto;

                            img {
                                width: 32px;
                                height: 32px;
                                margin: 0 20px;
                            }
                        }

                        .sorts {
                            position: absolute;
                            top: 80px;
                            right: 110px;
                            background-color: #fff;
                            border-radius: 10px;
                            box-shadow: 0 0 10px 5px #ddd;
                            z-index: 99;

                            &::before {
                                content: '';
                                width: 0px;
                                height: 0px;
                                border-left: 10px solid transparent;
                                border-right: 10px solid transparent;
                                border-bottom: 10px solid #fff;
                                position: absolute;
                                top: -10px;
                                right: 20px;
                            }

                            .sortList {
                                padding: 15px 30px;
                                border-bottom: 1px solid #eee;

                                img {
                                    width: 42px;
                                    height: 40px;
                                    vertical-align: middle;
                                    margin-right: 20px;
                                }
                            }
                        }
                    }

                    // 资料列表
                    .delBtn {
                        background-color: #ff9300;
                        color: #fff;
                        font-size: 30px;
                    }

                    .demo-content {
                        .resList {
                            display: flex;
                            padding: 30px 26px;
                            border-bottom: 2px solid #f0efee;
                            box-sizing: border-box;

                            .resList_left {
                                width: 85px;
                                height: 100px;
                                margin-right: 20px;
                            }

                            .resList_middle {
                                & > div:nth-child(1) {
                                    font-size: 30px;
                                    margin-bottom: 10px;
                                }

                                & > div:nth-child(2) {
                                    font-size: 26px;
                                    color: #a1a1a1;

                                    span {
                                        margin: 0 10px;
                                    }
                                }
                            }

                            .resList_right {
                                margin-left: auto;
                                display: flex;
                                align-items: center;

                                img {
                                    width: 38px;
                                    height: 32px;
                                    margin: 0 15px;
                                }
                            }
                        }
                    }
                }

                // 评价样式
                .commentBox {
                    .evaBox {
                        padding: 20px 26px;
                        padding-bottom: 100px;

                        .evaList {
                            display: flex;

                            .evaList_left {
                                margin-right: 20px;

                                img {
                                    width: 80px;
                                    height: 80px;
                                    margin-top: 20px;
                                }
                            }

                            .evaList_right {
                                width: 100%;
                                font-size: 35px;
                                border-bottom: 1px solid #eeeeee;

                                .evaList_right_top {
                                    display: flex;
                                    justify-content: space-between;
                                    align-items: center;

                                    div {
                                        color: #575757;
                                    }

                                    .stars {
                                        img {
                                            width: 28px;
                                            height: 28px;
                                            margin-right: 10px;
                                        }
                                    }
                                }

                                .evaList_right_middle {
                                    margin: 10px 0;
                                }

                                .evaList_right_link {
                                    margin: 10px 0;
                                    background-color: #f7f7f7;
                                    display: flex;
                                    align-items: center;
                                    padding: 10px 20px;
                                    font-size: 30px;

                                    .evaList_right_link_name {
                                        max-width: 260px;
                                        color: #5f7293;
                                        white-space: nowrap;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                    }

                                    .evaList_right_link_num {
                                        color: #5f7293;
                                        margin-left: 20px;
                                    }
                                }

                                .evaList_right_bottom {
                                    margin: 20px 0;
                                    color: #a7a7a7;
                                    font-size: 24px;
                                    display: flex;
                                    justify-content: center;
                                    /* align-items: center; */

                                    .evaList_right_bottom_right {
                                        margin-left: auto;
                                        display: flex;
                                        align-items: center;

                                        img {
                                            width: 30px;
                                            height: 28px;
                                            margin: 0px 20px;
                                        }

                                        div {
                                            display: inline-block;
                                            font-size: 32px;
                                        }
                                    }
                                }
                            }
                        }

                        .commentBtn {
                            position: absolute;
                            bottom: 20px;
                            left: 20px;
                            right: 20px;
                            height: 80px;
                            line-height: 80px;
                            text-align: center;
                            background-image: linear-gradient(-90deg, #ff8f00, #f50 97%);
                            color: #fff;
                            border: 2px solid #eee;
                            border-radius: 20px;
                            font-size: 30px;
                        }
                    }
                }
            }

            .emptyBox {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 300px;
            }
        }

        // 下载弹框
        .downLoadIcon {
            width: 84px;
            height: 98px;
            margin: 20px 0;
        }

        // 目录底部菜单
        .continues {
            position: fixed;
            bottom: 15px;
            left: 10px;
            right: 10px;
            background-color: #5abb52;
            display: flex;
            justify-content: space-between;
            align-items: center;

            img {
                width: 50px;
                height: 50px;
                margin: 20px 30px;
            }

            div {
                color: #fff;
                font-size: 30px;
            }

            .continue_btn {
                background-color: #fff;
                color: #44a73c;
                text-align: center;
                padding: 10px 30px;
                border-radius: 20px;
                margin-right: 30px;
            }
        }

        // .mask{
        //   position: fixed;
        //   top: 0;
        //   bottom: 0;
        //   left: 0;
        //   right: 0;
        //   background: rgba(0, 0, 0 , .6);
        //   z-index: 88;
        // }
        // 评价弹框
        /deep/ .commentDialog {
            .innerBox {
                text-align: left;

                .starBox {
                    .label {
                        font-size: 30px;
                        margin-right: 20px;
                        padding-top: 5px;
                    }
                }
            }
        }
    }
</style>